import React from 'react'
import {Button, Col, Form, Input, Modal, Row} from 'antd'


const formItemLayout = {
  labelCol: {
    xs: {span: 24},
    sm: {span: 4},
  },
  wrapperCol: {
    xs: {span: 24},
    sm: {span: 16},
  },
}


class EditOrganizationModal extends React.Component {
  state = {
    id: -1,
    roles: []
  }

  handleSubmit = (e) => {
    e.preventDefault()
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.id = this.state.id
        this.props.editOrganization(values)
      }
    })
  }

  componentWillReceiveProps = nextProps => {
    const {organization, form} = nextProps
    if (organization === this.props.organization ) {
      return false
    }
    const {id,title} = organization
    form.setFieldsValue({title})
    this.setState({id: id})
  }

  render() {
    const {isEditModalOpen, closeModal, form} = this.props
    const {getFieldDecorator} = form
    return <div>
      <Modal
        title='修改'
        visible={isEditModalOpen}
        footer={null}
        onCancel={() => closeModal()}
      >
        <Form onSubmit={this.handleSubmit}>
        <Form.Item
            {...formItemLayout}
            label="名称"
          >
            {getFieldDecorator('title', {
              rules: [{
                required: true, message: '请输入名称',
              }],
            })(
              <Input/>
            )}
          </Form.Item>
          <Row type='flex' align='center'>
            <Col>
              <Button type="primary"
                      htmlType="submit">确定</Button>
            </Col>
          </Row>
        </Form>
      </Modal>
    </div>
  }
}

const EditOrganizationModalForm = Form.create()(EditOrganizationModal)

export default EditOrganizationModalForm
